<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
{% block sw_customer_imitate_customer_modal %}
<sw-modal
    :title="modalTitle"
    class="sw-customer-imitate-customer-modal"
    @modal-close="onCancel"
>
    {% block sw_customer_imitate_customer_modal_alert %}
    <mt-banner
        v-if="hasSalesChannelDomains"
    >
        <i18n-t
            keypath="sw-customer.imitateCustomerModal.modalInfo"
            tag="p"
            scope="local"
        >
            <template #logout>
                <b>{{ $tc('sw-customer.imitateCustomerModal.modalInfoLogout') }}</b>
            </template>
        </i18n-t>
    </mt-banner>

    <mt-banner
        v-else
        variant="attention"
    >
        {{ $tc('sw-customer.imitateCustomerModal.modalInfoNoDomains') }}
    </mt-banner>
    {% endblock %}

    {% block sw_customer_imitate_customer_modal_description %}
    <div
        v-if="hasSalesChannelDomains"
        class="imitate-customer-modal-description"
    >
        {{ modalDescription }}
    </div>
    {% endblock %}

    {% block sw_customer_imitate_customer_modal_body %}
    <sw-container
        v-if="hasSalesChannelDomains"
        class="imitate-customer-modal-container"
        columns="1fr"
        gap="8px 0px"
    >
        {% block sw_customer_imitate_customer_modal_sales_channel_domain_items %}
        <sw-context-menu-item
            v-for="salesChannelDomain of salesChannelDomains"
            :key="salesChannelDomain.id"
            target="_blank"
            @click="onSalesChannelDomainMenuItemClick(salesChannelDomain.salesChannelId, salesChannelDomain.url)"
        >

            <div
                class="imitate-customer-modal-item-content"
                columns="1fr 1fr"
                gap="10px 0px"
            >
                <div class="imitate-customer-modal-item-header">
                    {{ salesChannelDomain.salesChannel.translated.name }}
                </div>
                <div class="imitate-customer-modal-item-url">
                    {{ salesChannelDomain.url }}
                </div>
                <mt-icon
                    name="regular-external-link-s"
                    size="16px"
                />
            </div>
        </sw-context-menu-item>
        {% endblock %}
    </sw-container>
    {% endblock %}

    {% block sw_customer_imitate_customer_modal_footer %}
    <template #modal-footer>
        <div>
            {% block sw_customer_imitate_customer_modal_footer_cancel %}
            <mt-button
                size="small"
                variant="secondary"
                @click="onCancel"
            >
                {{ $tc('sw-customer.imitateCustomerModal.labelCancel') }}
            </mt-button>
            {% endblock %}
        </div>
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
